﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Site.Master" AutoEventWireup="true" CodeBehind="EmployeeKeyIn.aspx.cs" Inherits="ONTS.WEB.Views.EmployeeKeyIn1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="../assets/css/bootstrap.css" />
    <link rel="stylesheet" href="../assets/css/font-awesome.css" />
    <link rel="stylesheet" href="../assets/css/jquery-ui.css" />
    <link rel="stylesheet" href="../assets/css/datepicker.css" />
    <link rel="stylesheet" href="../assets/css/ui.jqgrid.css" />
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="../assets/css/jquery-ui.custom.css" />
    <link rel="stylesheet" href="../assets/css/jquery.gritter.css" />

    <!-- text fonts -->
    <link rel="stylesheet" href="../assets/css/ace-fonts.css" />

    <!-- ace styles -->
    <link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    <!-- ace styles -->
    <link href="../css/Main.css" rel="stylesheet" />
    <link href="../css/custom.css" rel="stylesheet" />

    <style>
        /* some elements used in demo only */
        .spinner-preview
        {
            width: 100px;
            height: 100px;
            text-align: center;
            margin-top: 60px;
        }

        .dropdown-preview
        {
            margin: 0 5px;
            display: inline-block;
        }

            .dropdown-preview > .dropdown-menu
            {
                display: block;
                position: static;
                margin-bottom: 5px;
            }
    </style>

    <!-- ace settings handler -->
    <script src="../assets/js/ace-extra.js"></script>


    <form runat="server">
        <!-- #section:elements.tab.option -->
        <div class="tabbable">
            <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
                <li class="active">
                    <a data-toggle="tab" href="#emp">Employee</a>
                </li>

                <li>
                    <a data-toggle="tab" href="#edu">Education</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#family">Family</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#Marital">Marital Status</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#Emergency">Emergency Notify</a>
                </li>

            </ul>

            <div class="tab-content">

                <div id="emp" class="tab-pane in active">

                    <div class="row">
                        <div class="col-xs-12 col-sm-6">
                            <div class="widget-box">
                                <div class="widget-header">
                                    <h4 class="widget-title"></h4>

                                    <div class="widget-toolbar">
                                        <a href="#" data-action="collapse">
                                            <i class="ace-icon fa fa-chevron-up"></i>
                                        </a>
                                    </div>
                                </div>

                                <div class="widget-body">
                                    <div class="widget-main">
                                        <div>

                                            <label for="form-field-8">Employee ID</label><span class="requiredField"></span>
                                            <asp:TextBox ID="ID" runat="server" CssClass="form-control"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="rfEMP_ID" ControlToValidate="ID" runat="server" ErrorMessage="EmployeeID : Field is required." ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator Display = "Dynamic" ControlToValidate = "ID" ID="regVal" ValidationExpression = "^[\s\S]{6,9}$" runat="server" ErrorMessage="Minimum 6 and Maximum 9 characters required." ForeColor="Red"></asp:RegularExpressionValidator>

                                        </div>

                                        <div>

                                            <label for="form-field-8">Title</label>
                                            <asp:DropDownList CssClass="form-control" ID="title" runat="server">
                                                <asp:ListItem>MR</asp:ListItem>
                                                <asp:ListItem>MISS</asp:ListItem>
                                                <asp:ListItem>MRS</asp:ListItem>
                                            </asp:DropDownList>
                                          
                                        </div>
                                        <div>

                                            <label for="form-field-8">NameEN</label><span class="requiredField"></span>
                                            <asp:TextBox ID="NameEN" runat="server" CssClass="form-control"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="rfNameEn" ControlToValidate="NameEN" runat="server" ErrorMessage="NameEN : Field is required." ForeColor="Red"></asp:RequiredFieldValidator>
                                            <%--   <input type="text" id="NameEN" placeholder="" class="form-control" />--%>
                                        </div>
                                        <div>

                                            <label for="form-field-8">NameTH</label> <span class="requiredField"></span>
                                            <asp:TextBox ID="NameTH" runat="server" CssClass="form-control"></asp:TextBox>
                                            <%--<input type="text" id="NameTH" placeholder="" class="form-control" />--%>
                                            <asp:RequiredFieldValidator ID="rfNameTH" runat="server" ControlToValidate="NameTH" ErrorMessage="NameTH : Field is required." ForeColor="Red"></asp:RequiredFieldValidator>
                                        </div>
                                        <div>

                                            <label for="form-field-8">NickName</label>
                                            <asp:TextBox ID="NickName" runat="server" CssClass="form-control"></asp:TextBox>
                                            <%--<input type="text" id="NickName" placeholder="" class="form-control" />--%>
                                        </div>
                                        <div>
                                            <label for="form-field-select-1">Gender</label>
                                            <asp:DropDownList CssClass="form-control" ID="Gender" runat="server">
                                                <asp:ListItem>MALE</asp:ListItem>
                                                <asp:ListItem>FEMALE</asp:ListItem>
                                            </asp:DropDownList>
                                            <%--<select class="form-control" id="Gender">
                                                <option value="MALE">MALE</option>
                                                <option value="FEMALE">FEMALE</option>

                                            </select>--%>
                                        </div>
                                        <div>

                                            <label for="form-field-8">ID Card</label> <span class="requiredField"></span>
                                            <asp:TextBox ID="IDCard" runat="server" CssClass="form-control"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="rqfIDCard" runat="server" ControlToValidate="IDCard" ErrorMessage="IDCard : Field is required." ForeColor="Red"></asp:RequiredFieldValidator>
                                            <%--<input type="text" id="IDCard" placeholder="" class="form-control" />--%>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Date Of Birth</label>
                                            <asp:TextBox ID="dob" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                                            <%--<input type="text" id="dob" placeholder="" class="form-control" />--%>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Nationality</label>
                                            <asp:DropDownList CssClass="form-control" ID="ddl_Nationality" runat="server">
                                            </asp:DropDownList>
                                            <%-- <asp:TextBox ID="Nationality" runat="server" CssClass="form-control"></asp:TextBox>--%>
                                            <%--<input type="text" id="Nationality" placeholder="" class="form-control" />--%>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Religion</label>
                                            <asp:DropDownList CssClass="form-control" ID="ddl_Religion" runat="server">
                                            </asp:DropDownList>
                                            <%--<asp:TextBox ID="Religion" runat="server" CssClass="form-control"></asp:TextBox>--%>
                                            <%--<input type="text" id="Religion" placeholder="" class="form-control" />--%>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Start Work</label>
                                            <asp:TextBox ID="StartWork" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                                            <%--<input type="text" id="StartWork" placeholder="" class="form-control" />--%>
                                        </div>
                                        <div>

                                            <label for="form-field-8">End Work</label>
                                            <%--<input type="text" id="EndWork" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="EndWork" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>

                                        <div> 
                                            <label for="form-field-8">E-Mail</label><span class="requiredField"></span>
                                            <%--<input type="text" id="EndWork" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Email" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="rfEmail" ControlToValidate="Email" runat="server" ErrorMessage="Email : Field is required." ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator runat="server" ErrorMessage="Email  is not valid  (someone@example.com)" ForeColor="Red" ControlToValidate="Email" ID="regEmail" ValidationExpression="^(?(&quot;&quot;)(&quot;&quot;.+?&quot;&quot;@)|(([0-9a-zA-Z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-zA-Z])@))(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,6}))$" Display="Dynamic"></asp:RegularExpressionValidator>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.span -->

                        <div class="col-xs-12 col-sm-6">
                            <div class="widget-box">
                                <div class="widget-header">
                                    <h4 class="widget-title"></h4>

                                    <span class="widget-toolbar">


                                        <a href="#" data-action="collapse">
                                            <i class="ace-icon fa fa-chevron-up"></i>
                                        </a>


                                    </span>
                                </div>

                                <div class="widget-body">
                                    <div class="widget-main">

                                        <div>

                                            <label for="form-field-8">Position</label><span class="requiredField"></span>
                                            <%-- <input type="text" id="Position" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Position" runat="server" CssClass="form-control"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="rfPosition" ControlToValidate="Position" runat="server" ErrorMessage="Position : Field is required." ForeColor="Red"></asp:RequiredFieldValidator>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Department</label>
                                            <%-- <input type="text" id="Department" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Department" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>


                                        <div>

                                            <label for="form-field-8">Permanent Address</label>
                                            <%--<input type="text" id="Permanent" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Permanent" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Present Address</label>
                                            <%-- <input type="text" id="Present" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Present" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div>

                                            <label for="form-field-8">HOME Tel</label>
                                            <%--<input type="text" id="HomeTel" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="HomeTel" runat="server" CssClass="form-control"></asp:TextBox>
                                            <asp:RegularExpressionValidator runat="server" ErrorMessage="HOME Tel Number is not valid  (02-0000000)" ForeColor="Red" ControlToValidate="HomeTel" ID="regHometel" ValidationExpression="^\d{2}-\d{7}" Display="Dynamic"></asp:RegularExpressionValidator>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Mobile Tel</label><span class="requiredField"></span>
                                            <%--<input type="text" id="MobileTel" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="MobileTel" runat="server" CssClass="form-control"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="rfMobile" ControlToValidate="MobileTel" runat="server" ErrorMessage="MobileTel : Field is required." ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
                                            <asp:RegularExpressionValidator runat="server" ErrorMessage="MobileTel Number is not valid  (099-0000000)" ForeColor="Red" ControlToValidate="MobileTel" ID="regMobile" ValidationExpression="^\d{3}-\d{7}" Display="Dynamic"></asp:RegularExpressionValidator>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Terminate Date</label>
                                            <%--<input type="text" id="Terminate" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Terminate" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Probation Date</label><span class="requiredField"></span>
                                            <%--<input type="text" id="Probation" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Probation" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
                                            <asp:RequiredFieldValidator ID="rqfProbation" ControlToValidate="Probation" runat="server" ErrorMessage="Probation : Field is required." ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
                                        </div>
                                        <div>

                                            <label for="form-field-8">IQ Test</label>
                                            <%-- <input type="text" id="IQ" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="IQ" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Type Most</label>
                                            <%--<input type="text" id="Most" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Most" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>
                                        <div>

                                            <label for="form-field-8">Type Least</label>
                                            <%--<input type="text" id="Least" placeholder="" class="form-control" />--%>
                                            <asp:TextBox ID="Least" runat="server" CssClass="form-control"></asp:TextBox>
                                        </div>

                                        <div>
                                            <label for="form-field-select-1">Emp Type</label>

                                            <asp:DropDownList CssClass="form-control" ID="emp_type" runat="server">
                                                <asp:ListItem>PERMANENT</asp:ListItem>
                                                <asp:ListItem>CONTRACT</asp:ListItem>
                                            </asp:DropDownList>
                                            
                                        </div>
                                        <div>
                                            <label for="form-field-select-1">Work Status</label> 
                                            <div class="checkbox">
                                                
                                                <label> <asp:CheckBox   ID="chkWorkStatus" runat="server" Text="On-Site/Office" />
                                                  <%--  <input name="form-field-checkbox" id="WorkStatus" type="checkbox" class="ace" />
                                                    <span class="lbl">On-Site/Office</span>--%>
                                                </label>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.span -->
                    </div>

                </div>

                <div id="edu" class="tab-pane">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">

                            <div id="dvedu">

                                <table id="grid-edu"></table>
                                <div id="grid-edu-pager"></div>
                            </div> 
                        </div>
                    </div>

                </div>

                <div id="family" class="tab-pane">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">

                            <div id="dvfam">

                                <table id="grid-fam"></table>
                                <div id="grid-fam-pager"></div>
                            </div>
                             
                        </div>
                    </div>
                </div>

                <div id="Marital" class="tab-pane">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">
                            <div id="dvmarital">

                                <table id="grid-marital"></table>
                                <div id="grid-marital-pager"></div>
                            </div>
                             
                        </div>
                    </div>
                </div>

                <div id="Emergency" class="tab-pane">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">

                            <div id="dvemer">

                                <table id="grid-emer"></table>
                                <div id="grid-emer-pager"></div>
                            </div>
                             
                        </div>
                    </div>
                </div>

            </div>
            <div class="space-24"></div>
            <div class="col-sm-12">
                <asp:Button ID="btn_Save" CssClass="btn btn-info" OnClick="btn_Save_Click" runat="server" Width="100" Text="Submit" />
                 
                &nbsp; &nbsp; &nbsp;

                <asp:Button ID="btn_Reset" CssClass="btn" runat="server" Width="100" Text="Reset" />
                 
            </div>

        </div>
    </form>
    <!--[if !IE]> -->
    <script type="text/javascript">
        window.jQuery || document.write("<script src='../assets/js/jquery.js'>" + "<" + "/script>");
    </script>

    <!-- <![endif]-->

    <!-- page specific plugin scripts -->
    <script src="../assets/js/date-time/bootstrap-datepicker.js"></script>
    <script src="../assets/js/jqGrid/jquery.jqGrid.src.js"></script>
    <script src="../assets/js/jqGrid/i18n/grid.locale-en.js"></script>
    <!-- inline scripts related to this page -->
    <script type="text/javascript">

        $(document).ready(function () {
            $("#m1").addClass("active");
        });

        $("#StartWork").datepicker({ format: 'yyyy-mm-dd', autoclose: true });
        $("#EndWork").datepicker({ format: 'yyyy-mm-dd', autoclose: true });
        $("#dob").datepicker({ format: 'yyyy-mm-dd', autoclose: true });
        $("#Terminate").datepicker({ format: 'yyyy-mm-dd', autoclose: true });
        $("#Probation").datepicker({ format: 'yyyy-mm-dd', autoclose: true });

        jQuery(function ($) {
            var grid_selector = "#grid-edu";
            var pager_selector = "#grid-edu-pager";

            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid('setGridWidth', $(".tab-content").width());
                $(pager_fam_selector).jqGrid('setGridWidth', $(".tab-content").width());

            })
            //resize on sidebar collapse/expand
            var parent_column = $(grid_selector).closest('[class*="col-"]');
            $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function () {
                        $(grid_selector).jqGrid('setGridWidth', $(".tab-content").width());
                    }, 0);
                }
            })

            jQuery(grid_selector).jqGrid({

                url: '../Service/EducationService.ashx',
                datatype: "json",
                height: 250,
                colNames: [' ', 'No', 'University', 'YearOfEdu', 'Major', 'Certification'],
                colModel: [
                    {
                        name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions',
                        formatoptions: {

                            //delbutton: false,//disable delete button

                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                            editformbutton: true, editOptions: { recreateForm: true, beforeShowForm: beforeEditCallback, closeAfterEdit: true }
                        }
                    },
                    { name: 'RowIndex', index: 'RowIndex', width: 60, sorttype: "int", editable: false, hidden: false, sortable: false },
                    { name: 'UNIVERSITY', index: 'UNIVERSITY', width: 150, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'YEAROFEDU', index: 'YEAROFEDU', width: 100, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'MAJOR', index: 'MAJOR', width: 100, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'CERTIFICATION', index: 'CERTIFICATION', width: 100, editable: true, sortable: false, editrules: { required: true } }
                ],

                viewrecords: true,
                rowNum: 10,
                height: 'auto',
                //rowList: [10, 20, 30],
                pager: pager_selector,
                altRows: true,
                //toppager: true,
                jsonReader: { repeatitems: false, id: 'RowIndex' },
                // multiselect: true,
                //multikey: "ctrlKey",
                multiboxonly: true,
                gridview: true,
                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                editurl: '../Service/EducationService.ashx',//nothing is saved
                caption: "Education List"
            });

            /////////////////////////// Grid Family //////////////////////////////////
            var grid_fam_selector = "#grid-fam";
            var pager_fam_selector = "#grid-fam-pager";
            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_fam_selector).jqGrid('setGridWidth', $(".tab-content").width());
                $(pager_fam_selector).jqGrid('setGridWidth', $(".tab-content").width());

            })

            jQuery(grid_fam_selector).jqGrid({

                url: '../Service/FamilyService.ashx',
                datatype: "json",
                height: 250,
                colNames: ['', 'NO', 'Father Name', 'Occupation', 'Mother Name', 'Occupation', 'Number of Brother'],
                colModel: [
                    {
                        name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions',
                        formatoptions: {

                            //delbutton: false,//disable delete button
                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                            editformbutton: true, editOptions: { recreateForm: true, beforeShowForm: beforeEditCallback, closeAfterEdit: true }
                        }
                    },
                    { name: 'RowIndex', index: 'RowIndex', width: 80, sorttype: "int", editable: false, hidden: false, sortable: true },
                    { name: 'NAMEOFFATHER', index: 'NAMEOFFATHER', width: 100, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'F_OCCUPATION', index: 'F_OCCUPATION', width: 100, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'NAMEOFMOTHER', index: 'NAMEOFMOTHER', width: 100, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'M_OCCUPATION', index: 'M_OCCUPATION', width: 100, editable: true, sortable: false, editrules: { required: true } },
                    {
                        name: 'NUMOFBRO_SIS', index: 'NUMOFBRO_SIS', width: 100, editable: true, edittype: "select",
                        editoptions: {
                            value: "0:0;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10"  
                        }
                    } 
                ],

                viewrecords: true,
                rowNum: 10,
                height: 'auto',
                //rowList: [10, 20, 30],
                pager: pager_fam_selector,
                altRows: true,
                //toppager: true,
                jsonReader: { repeatitems: false, id: 'RowIndex' },
                // multiselect: true,
                //multikey: "ctrlKey",
                multiboxonly: true,
                gridview: true,
                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                editurl: '../Service/FamilyService.ashx',//nothing is saved
                caption: "Family List"
            });

            /////////////////////////// End Grid Family //////////////////////////////////


            /////////////////////////// Grid Marital //////////////////////////////////
            var grid_marital_selector = "#grid-marital";
            var pager_marital_selector = "#grid-marital-pager";
            $(window).on('resize.jqGrid', function () {
                $(grid_marital_selector).jqGrid('setGridWidth', $(".tab-content").width());
                $(pager_marital_selector).jqGrid('setGridWidth', $(".tab-content").width());

            })
            jQuery(grid_marital_selector).jqGrid({

                url: '../Service/MaritalService.ashx',
                datatype: "json",
                height: 250,
                colNames: ['', 'NO', 'Spouse Name', 'Occupation', 'Number Of Child'],
                colModel: [
                    {
                        name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions',
                        formatoptions: {

                            //delbutton: false,//disable delete button
                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                            editformbutton: true, editOptions: { recreateForm: true, beforeShowForm: beforeEditCallback, closeAfterEdit: true }
                        }
                    },
                    { name: 'RowIndex', index: 'RowIndex', width: 60, sorttype: "int", editable: false, hidden: false, sortable: false },
                    { name: 'SPOUSE_NAME', index: 'SPOUSE_NAME', width: 150, editable: true, sortable: false, editrules: { required: true } },
                     { name: 'OCCUPATION', index: 'OCCUPATION', width: 150, editable: true, sortable: false, editrules: { required: true } },
                     {
                         name: 'NUMBEROFCHILD', index: 'NUMBEROFCHILD', width: 100, editable: true, edittype: "select",
                         editoptions: {
                             value: "0:0;1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10"  
                         }
                     }
                ],

                viewrecords: true,
                rowNum: 10,
                height: 'auto',
                //rowList: [10, 20, 30],
                pager: pager_marital_selector,
                altRows: true,
                //toppager: true,
                jsonReader: { repeatitems: false, id: 'RowIndex' },
                // multiselect: true,
                //multikey: "ctrlKey",
                multiboxonly: true,
                gridview: true,
                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                editurl: '../Service/MaritalService.ashx',//nothing is saved
                caption: "Marital List"
            });

            /////////////////////////// End Grid Marital //////////////////////////////////

            /////////////////////////// Grid Emergency //////////////////////////////////
            var grid_emer_selector = "#grid-emer";
            var pager_emer_selector = "#grid-emer-pager";

            $(window).on('resize.jqGrid', function () {
                $(grid_emer_selector).jqGrid('setGridWidth', $(".tab-content").width());
                $(pager_emer_selector).jqGrid('setGridWidth', $(".tab-content").width());

            })
            jQuery(grid_emer_selector).jqGrid({

                url: '../Service/EmergencyService.ashx',
                datatype: "json",
                height: 250,
                colNames: [' ', 'NO', 'Name', 'RelationShip', 'Address', 'Mobile', 'Home Tel'],
                colModel: [
                    {
                        name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                        formatter: 'actions',
                        formatoptions: {

                            //delbutton: false,//disable delete button

                            delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
                            editformbutton: true, editOptions: { recreateForm: true, beforeShowForm: beforeEditCallback, closeAfterEdit: true }
                        }
                    },
                    { name: 'RowIndex', index: 'RowIndex', width: 80, sorttype: "int", editable: false, hidden: false, sortable: false },
                    { name: 'NAME', index: 'NAME', width: 120, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'RELATIONSHIP', index: 'RELATIONSHIP', width: 120, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'ADDRESS', index: 'ADDRESS', width: 100, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'MOBILE', index: 'MOBILE', width: 100, editable: true, sortable: false, editrules: { required: true } },
                    { name: 'HOME_TEL', index: 'HOME_TEL', width: 100, editable: true, sortable: false }
                ],

                viewrecords: true,
                rowNum: 10,
                height: 'auto',
                //rowList: [10, 20, 30],
                pager: pager_emer_selector,
                altRows: true,
                //toppager: true,
                jsonReader: { repeatitems: false, id: 'RowIndex' },
                // multiselect: true,
                //multikey: "ctrlKey",
                multiboxonly: true,
                gridview: true,
                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                editurl: '../Service/EmergencyService.ashx',//nothing is saved
                caption: "Emergency List"
            });

            /////////////////////////// End Grid Emergency //////////////////////////////////

            $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

            //enable datepicker
            function pickDate(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=text]')
                            .datepicker({ format: 'yyyy-mm-dd', autoclose: true });
                }, 0);
            }

            //navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                { 	//navbar options
                    edit: false,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: false,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: false,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: false,
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form

                    //width: 700,
                    //closeAfterEdit: true,
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //new record form
                    //width: 700,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                        .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                    , onclickSubmit: function (options, rowid) {
                        var rowData = $(this).jqGrid("getRowData", rowid);
                        //options.url = GetUrlServiceHoliday($("#ContentPlaceHolder1_ddlYear").val(), $("#ContentPlaceHolder1_ddlSite").val());
                        return {}; // you can return additional data which will be sent to the server
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        if (form.data('styled')) return false;

                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);

                        form.data('styled', true);
                    },
                    onClick: function (e) {
                        //alert(1);
                    }
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        style_search_form(form);
                    },
                    afterRedraw: function () {
                        style_search_filters($(this));
                    }
                    ,
                    multipleSearch: true,
                    /**
                    multipleGroup:true,
                    showQuery: true
                    */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
            )

            //////////////////////////////////////////// Footer Grid Family ///////////////////////////////////////////

            jQuery(grid_fam_selector).jqGrid('navGrid', pager_fam_selector,
                { 	//navbar options
                    edit: false,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: false,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: false,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: false,
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form
                    //width: 700,
                    // closeAfterEdit: true,
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //new record form
                    //width: 700,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                        .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                    , onclickSubmit: function (options, rowid) {
                        var rowData = $(this).jqGrid("getRowData", rowid);
                        return {}; // you can return additional data which will be sent to the server
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        if (form.data('styled')) return false;

                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);

                        form.data('styled', true);
                    },
                    onClick: function (e) {
                        //alert(1);
                    }
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        style_search_form(form);
                    },
                    afterRedraw: function () {
                        style_search_filters($(this));
                    }
                    ,
                    multipleSearch: true,
                    /**
                    multipleGroup:true,
                    showQuery: true
                    */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
            )
            //////////////////////////////////////////// End Footer Grid Family ///////////////////////////////////////////


            //////////////////////////////////////////// Footer Marital Grid Family ///////////////////////////////////////////

            jQuery(grid_marital_selector).jqGrid('navGrid', pager_marital_selector,
                { 	//navbar options
                    edit: false,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: false,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: false,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: false,
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form

                    //width: 700,
                    // closeAfterEdit: true,
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //new record form
                    //width: 700,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                        .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                    , onclickSubmit: function (options, rowid) {
                        var rowData = $(this).jqGrid("getRowData", rowid);
                        //options.url = GetUrlServiceHoliday($("#ContentPlaceHolder1_ddlYear").val(), $("#ContentPlaceHolder1_ddlSite").val());
                        return {}; // you can return additional data which will be sent to the server
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        if (form.data('styled')) return false;

                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);

                        form.data('styled', true);
                    },
                    onClick: function (e) {
                        //alert(1);
                    }
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        style_search_form(form);
                    },
                    afterRedraw: function () {
                        style_search_filters($(this));
                    }
                    ,
                    multipleSearch: true,
                    /**
                    multipleGroup:true,
                    showQuery: true
                    */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
            )
            //////////////////////////////////////////// End Footer Grid marital ///////////////////////////////////////////

            //////////////////////////////////////////// Footer Emergency Grid Family ///////////////////////////////////////////

            jQuery(grid_emer_selector).jqGrid('navGrid', pager_emer_selector,
                { 	//navbar options
                    edit: false,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: false,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: false,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: false,
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form

                    //width: 700,
                    // closeAfterEdit: true,
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //new record form
                    //width: 700,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                        .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                    , onclickSubmit: function (options, rowid) {
                        var rowData = $(this).jqGrid("getRowData", rowid);
                        //options.url = GetUrlServiceHoliday($("#ContentPlaceHolder1_ddlYear").val(), $("#ContentPlaceHolder1_ddlSite").val());
                        return {}; // you can return additional data which will be sent to the server
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        if (form.data('styled')) return false;

                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);

                        form.data('styled', true);
                    },
                    onClick: function (e) {
                        //alert(1);
                    }
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        style_search_form(form);
                    },
                    afterRedraw: function () {
                        style_search_filters($(this));
                    }
                    ,
                    multipleSearch: true,
                    /**
                    multipleGroup:true,
                    showQuery: true
                    */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
            )
            //////////////////////////////////////////// End Footer Grid Emergency ///////////////////////////////////////////



            function style_edit_form(form) {
                //enable datepicker on "sdate" field and switches for "stock" field
                form.find('input[name=DATE]').datepicker({ format: 'yyyy-mm-dd', autoclose: true })

                //form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
                //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
                //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


                //update buttons classes
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').hide();
                buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
            }

            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
            }

            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }

            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
            }

            function beforeDeleteCallback(e) {
                var form = $(e[0]);
                if (form.data('styled')) return false;

                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);

                form.data('styled', true);
            }

            function beforeEditCallback(e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }

            function styleCheckbox(table) {
                /**
                    $(table).find('input:checkbox').addClass('ace')
                    .wrap('<label />')
                    .after('<span class="lbl align-top" />')
            
            
                    $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                    .find('input.cbox[type=checkbox]').addClass('ace')
                    .wrap('<label />').after('<span class="lbl align-top" />');
                */
            }

            function updateActionIcons(table) {
                /**
                var replacement = 
                {
                    'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
                    'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
                    'ui-icon-disk' : 'ace-icon fa fa-check green',
                    'ui-icon-cancel' : 'ace-icon fa fa-times red'
                };
                $(table).find('.ui-pg-div span.ui-icon').each(function(){
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                })
                */
            }

            function updatePagerIcons(table) {
                var replacement =
                {
                    'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                    'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                    'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                    'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                    if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({ container: 'body' });
                $(table).find('.ui-pg-div').tooltip({ container: 'body' });
            }

            $(document).one('ajaxloadstart.page', function (e) {
                $(grid_selector).jqGrid('GridUnload');
                $('.ui-jqdialog').remove();
            });


        });
    </script>

</asp:Content>
